<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    body,html{
        margin: 0;
        padding: 0;
    }
        .container {
            width: 100%;
            height: 1000px;
            background-color: #bfa;
        }
        /*媒体查询 当使用min-width做为判断条件一定要从小到大来写其原因 css解释从上到下 执行有覆盖的可能*/
    @media (min-width: 768px) {
        .container{/*这里的条件只有当width: 1280px满足时才执行*/
            width: 750px;
        }
    }
    @media (min-width: 992px) {
        .container{/*这里的条件只有当width: 1280px满足时才执行*/
            width: 970px;
        }
    }
        @media (min-width: 1200px) {
            .container{/*这里的条件只有当width: 1280px满足时才执行*/
                width: 1170px;
            }
        }

    </style>
</head>
<body>
    <div class="container"></div>
    <pre>
    viewport 视口
    </pre>
</body>
</html>